<script setup lang="ts">
import { ref, Ref, watch } from "vue";
import { storeToRefs } from "pinia";
import { ElMessage, ElMessageBox } from "element-plus";
import { attribute } from "@/api/product/attributeApi/interface.ts";
import useTabNavStore from "@/pinia/modules/product/attributeStore/tabNavStore/tabNavStore.ts";
import useAttributeStore from "@/pinia/modules/product/attributeStore/attributeStore/attributeStore.ts";


const tabNavStore = useTabNavStore();
const attributeStore = useAttributeStore();

const { categoryId } = storeToRefs(tabNavStore);
const { attributeList } = storeToRefs(attributeStore);

const loading: Ref<boolean> = ref(false);

/* 获取平台属性的回调函数 */
const fetchAttributeList = async () => {
  try {
    loading.value = true;
    await attributeStore.fetchAttributeList(categoryId.value);
    ElMessage.success("属性列表获取成功");
  } catch (error: any) {
    ElMessage.error(error.message);
  } finally {
    loading.value = false;
  }
};

/* 点击删除属性按钮的回调函数 */
const handleDeleteAttribute = async (attr: attribute) => {
  const confirm = await ElMessageBox.confirm(`确定删除${attr.attrName}吗?`, "警告", { type: "warning" }).catch((error: any) => error);
  if (confirm === "cancel") return;
  try {
    await attributeStore.deleteAttribute(attr.id);
    await fetchAttributeList();
  } catch (error: any) {
    ElMessage.error(error.message);
  }
};


/* 点击添加属性按钮的回调函数 */
const handleAddAttribute = () => {
  attributeStore.changeScreen(1);
  attributeStore.changeEdit(false)
};

/* 点击编辑属性按钮的回调函数 */
const handleEditAttribute = (attr: attribute) => {
  attributeStore.changeScreen(1);
  attributeStore.changeEdit(true)
  attributeStore.findCurrentAttribute(attr);
};
/* 监听三级分类ID的变化，调用fetchAttributeList()函数获取属性列表 */
watch(() => categoryId.value.category3Id, () => {
  fetchAttributeList();
});
</script>

<template>
  <div class="attrTable">
    <el-button type="primary" icon="Plus" :disabled="!categoryId.category3Id" @click="handleAddAttribute">添加属性</el-button>
    <el-table stripe border :data="attributeList" v-loading="loading" element-loading-text="数据加载中....." element-loading-background="#fff">
      <el-table-column width="80px" label="序号" type="index" align="center"></el-table-column>
      <el-table-column width="150px" label="商品属性名称" prop="attrName" align="center"></el-table-column>
      <el-table-column label="商品属性值">
        <template #default="{row}">
          <el-tag effect="dark" v-for="(attrValue) in row.attrValueList" :key="attrValue.id">{{ attrValue.valueName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="300px" label="商品属性操作" align="center">
        <template #default="{row}">
          <el-button type="warning" icon="Edit" @click="handleEditAttribute(row)">编辑属性</el-button>
          <el-button type="danger" icon="Delete" @click="handleDeleteAttribute(row)">删除属性</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped lang="scss">
.attrTable {
  .el-table {
    margin-top: 10px;

    span {
      margin: 0 10px;
      cursor: pointer;
    }
  }
}
</style>
